<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="include/base.jsp" %>
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title>凯盛项目管理系统</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" href="css/loong.css" />
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body class="body">
	<%@ include file="include/top.jsp" %>
	
	<div class="container">
	  <div class="row row-inner">
	  <%@ include file="include/left.jsp" %>
		
		<div class="span8">
			
			<ul class="breadcrumb" style="margin-bottom:0px;border-radius: 3px 3px 0 0">
				<li class="active">
					<a href="#"><i class="icon-user"></i>联系人</a>
				</li>
			</ul>
			<div class="wall">
				<!-- <div class="row"> -->
					<c:if test="${not empty sessionScope.error }">
		        		<div class="alert alert-error">
		  					<button type="button" class="close" data-dismiss="alert">&times;</button>
		  					<h1 >${sessionScope.error }</h1>
						</div>
						
				      </c:if>
				      <c:remove var="error" scope="session"/>
					<div class="span3">
						<a href="new_contact.jspx" class="btn span2"><i class="icon-plus"></i>添加联系人</a>
						<div class="clear"></div>
						
						<ul class="unstyled" style="margin-top:15px;color:#000;">
							 
							 <c:choose>
								<c:when test="${not empty requestScope.list }">
							 		<c:forEach  items="${ requestScope.list}" var="item" >
											
											<li class="list" style="line-height:30px">
												<i class="icon-list-alt " ></i><a><button class="link contact_name " lab="${item.id }" style="width:100px;height:30px;">${item.name }</button></a><i class="icon-chevron-right "></i>
											</li>
										</c:forEach>
								 </c:when>
								<c:otherwise>
									<h3>您还没有添加联系人</h3>
								</c:otherwise>
							</c:choose>
							 
							<h3></h3>
							
						</ul>
					</div>
					
					
					
				      <div style="min-height:400px;border-left:1px solid #ccc;padding-left:15px">
								<div class="span4 inner" style="min-height:400px;display:none;border-left:1px solid #ccc;padding-left:15px">
							
							<address>
								<h3 id="contactName"></h3>
								<span id="id" style="display:none"></span>
								<p id=companyname></p>
								<small id="tel">手机</small><br/>
								<small id="moblie">固话</small><br/><br/>
								<small id="email">邮箱</small> <br/>
								<small id="address">地址</small><br/><br/>
								<small id="website">主页</small> <a href="http://www.hpu.edu.cn"></a><br/>
								<small id="weibo">微博</small> <a href="https://twitter.com/fankay"></a><br/>
							</address>
							
							<div class="line">记录</div>
								 <h5></h5>
								  <h6></h6>
							<a class=" btn content" >查看所有记录</a>
							<br/><br/><br/>
							<a class="btn btn-inverse edit" ><i class="icon-pencil icon-white"></i>编辑</a>
							<a class="btn btn-danger delete" ><i class="icon-trash icon-white"></i>删除</a>
						</div> 
					</div>
					<c:remove var="c_id" scope="session"/> 
				<!-- </div> -->
			</div>
		</div>
	  </div>
	  <%@ include file="include/foot.jsp" %>
	</div>
	
	 <script type="text/javascript" src="js/json.js"></script>
	 <script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
		
		
		$(document).ready(function(){
	    	var xmlHttp;
    	
	    	//创建Ajax引擎
	    	function createXmlHttp() {
	    		if(window.ActiveXObject) {
		    		//IE
	    			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		    	} else {
		    		//Chrome firefox 
		    		xmlHttp = new XMLHttpRequest();
		    	}
	    	}
		
    	function callback() {
    		var serverCode = xmlHttp.readyState;
    		if(serverCode == 4) {
    			var httpCode = xmlHttp.status;
    			if(httpCode == 200) {
    				//接受服务器返回的字符串
    				
    				var map =  eval('('+xmlHttp.responseText+')');
    				$("#contactName").html("姓名："+map.contact.name) ;
    				$("#companyname").html("公司："+map.contact.companyname) ;
					$("#tel").html("手机："+map.contact.tel) ;
					$("#moblie").html("固话："+map.contact.moblie) ;
					$("#email").html("邮箱："+map.contact.email) ;
					$("#address").html("地址："+map.contact.address) ;
					$("#website").html("主页："+map.contact.website) ;
					$("#weibo").html("微博："+map.contact.weibo) ;
					$("#id").html(map.contact.id) ;
					//alert(map.note_list.length);
					$("blockquote").remove();
					for(var i=0;i<map.note_list.length;i++){
						
						if($("h5").attr("id")!=i&&$("h6").attr("class")!=i){
							$(".line").after("<blockquote><h5></h5><h6></h6></blockquote>");
							$("h5").first().html(map.note_list[i].content);
							$("h6").first().html("发表于"+map.timelist[i]);
							
							
							
						}
						
					}
					
					
    			} else {
    				alert("服务器忙，请稍后...");
    			}
    		}
    	}
    	
    		var as = $(".contact_name");
	    	for ( var index = 0; index < as.length; index++) {
				as[index].onmousemove = onmove;
				as[index].onclick = click_a;
				
			}
	    	 function click_a(){
		    	 $(".inner").show();
		    	 $(".alert-error").hide();
		    	
		    	 
		    	 //1.创建Ajax引擎
	    		createXmlHttp();
	    		//2.告诉引擎请求的服务器地址(ajax.jspx)，请求方式(get)，是否异步请求(true)
	    		var id = $(this).attr("lab");
	    		xmlHttp.open("post","contactShow.jspx?id="+id,true);
	    		
	    		//3.设置回调函数
	    		xmlHttp.onreadystatechange = callback;
	    		
	    		//4.请求服务器
	    		xmlHttp.send();
		    		
	    		
			}; 
			function onmove(){
				$(this).show();
			}
			
			$(".edit").click(function(){
				var id = $("#id").html();
			
				$(this).attr("href","editContact.jspx?id="+id); 
			});	
	
			$(".delete").click(function(){
				var id = $("#id").html();
			
				$(this).attr("href","deleteContact.jspx?id="+id);
				
			});
			$(".content").click(function(){
				var id = $("#id").html();
				
				$(this).attr("href","content.jspx?id="+id);
				
			});
	
		});
			
		
			
		
		
	
		
	</script>
	
	
	
	
	
	
	
	
	
</body>
</html>